{% extends "base.html" %}


{% block content %}

    <div class="mdl-grid">
        <div class="mdl-layout-spacer"></div>
        <div class="mdl-cell--4-col mdl-cell--stretch">
            <div class="square_card square_card_start mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                    <h3 class="mdl-card__title-text">
                        Sensor Start
                    </h3>
                </div>
                <div class="mdl-card__supporting-text">
                    Start all services
                </div>
                <div class="mdl-card__actions mdl-card--border">
                    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
                       onclick="start_all()">
                        Start
                    </a>
                </div>
            </div>
        </div>
        <div class="mdl-layout-spacer"></div>
        <div class="mdl-cell--4-col mdl-cell--stretch">
            <div class="square_card square_card_stop mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                    <h3 class="mdl-card__title-text">
                        Sensor Stop
                    </h3>
                </div>
                <div class="mdl-card__supporting-text">
                    Stop all services
                </div>
                <div class="mdl-card__actions mdl-card--border">
                    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
                       onclick="stop_all()">
                        Stop
                    </a>
                </div>
            </div>
        </div>
        <div class="mdl-layout-spacer"></div>
    </div>

    <div class="mdl-grid">
        <div class="mdl-layout-spacer"></div>
        <div class="mdl-cell--4-col mdl-cell--stretch">
            <div class="square_card square_card_status mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                    <h3 class="mdl-card__title-text">
                        Sensor Status
                    </h3>
                </div>
                <div class="mdl-card__supporting-text">
                    Display sensor service status
                </div>
                <div class="mdl-card__actions mdl-card--border">
                    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
                       onclick="sensor_status()">
                        Status
                    </a>
                </div>
            </div>
        </div>
        <div class="mdl-layout-spacer"></div>
        <div class="mdl-cell--4-col mdl-cell--stretch">
            <div class="square_card square_card_clean mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                    <h3 class="mdl-card__title-text">
                        Clean Sensor
                    </h3>
                </div>
                <div class="mdl-card__supporting-text">
                    Remove captured data
                </div>
                <div class="mdl-card__actions mdl-card--border">
                    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
                       onclick="clean_sensor()">
                        Clean
                    </a>
                </div>
            </div>
        </div>
        <div class="mdl-layout-spacer"></div>
    </div>

    <div id="myModal" class="mdl-card modal mdl-shadow--4dp square_card_system">
        <div class="mdl-card__title mdl-card--expand">
            <h3 class="mdl-card__title-text">
                System Response
            </h3>
        </div>
        <div id="response_text" class="mdl-card__supporting-text">
            System response text
        </div>
        <div class="mdl-card__actions mdl-card--border">
            <button id="close" class="mdl-button mdl-button--colored mdl-button--raised" type="button">Close</button>
        </div>
    </div>

    <div class="modal center" id="myLoading">
        <div class="center">
            <div class="center">
                <div class="mdl-spinner mdl-js-spinner is-active"></div>
            </div>
        </div>
    </div>



{% endblock %}

